<template>
    <a-card title="识别记录" :bordered="false">

        <!-- Card Header -->
        <template slot="extra">
            <a-form layout="inline" @submit.prevent="searchSubmit">
                {{showSrc}}

                <a-form-item>
                    <a-input v-model="searchForm.name" placeholder="物品名称"></a-input>
                </a-form-item>

                <a-form-model-item>
                    <a-range-picker @change="rangeDateOnChange"/>
                </a-form-model-item>


                <a-form-item>
                    <a-button icon="search" type="primary" html-type="submit">搜索</a-button>
                </a-form-item>


            </a-form>
        </template>


        <a-list :grid="{ gutter:8, column: 4 }"
                :pagination="pagination"
                :data-source="dataSource">


            <a-list-item slot="renderItem" slot-scope="item, index" :bordered="false">


                <a-card hoverable style="width: 100%">
                    <img
                            slot="cover"
                            alt="example"
                            :src="item.picture"
                            @click="()=>{showSrc=item.picture}"
                    />
                    <a-card-meta :title="item.name">
                        <template slot="description">
                            识别时间:{{item.createTime}}
                        </template>
                    </a-card-meta>
                </a-card>


            </a-list-item>
        </a-list>

    <PicModal :imgsrc="showSrc"  v-if="showSrc.length>0" @closeModal="()=>{this.showSrc=''}" />
    </a-card>
</template>
<script>


    import {pagination} from '../public/colums.js';
    import {recordList} from '../public/http.js';

    export default {
        components: {
            PicModal:()=>import('./picModal')

        },

        data() {
            return {
                showSrc:'',
                editShow: false, //打开编辑器
                editRecord: {}, //正在编辑的记录
                dataSource: [],

                pagination: {

                    ...pagination,
                    pageSize: 8,
                    onChange: current => {
                        this.pagination.current = current;
                        this.getRecordList();
                    }
                },

                loading: false, //表格loading

                searchForm: {

                    name: '',
                    beginDate: null,
                    endDate: null,


                },


            };
        },
        methods: {
            rangeDateOnChange(date, dateString) {
                this.searchForm.beginDate = dateString[0];
                this.searchForm.endDate = dateString[1];
            },

            //1.0 获取表格数据
            getRecordList() {
                this.loading = true;
                let searchData = this.$exMod.filterObjEmpty(this.searchForm); //删除对象中的空值
                recordList(this.pagination, searchData).then(res => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.dataSource = res.data.result; //表格数据
                        this.pagination.total = res.data.total; //总记录条数
                    }
                });
            },


            //3.0 搜索提交
            searchSubmit() {
                this.pagination.current = 1;
                this.getRecordList();
            },


            //数据初始化
            async init() {

                this.getRecordList();
            }
        },
        created() {
            this.init();
        }
    };
</script>
